<template>
	<view style="padding: 0 30rpx;">
		<view
			style="background: url(../../static/my/vip-bg.png) left top / 100% 100% no-repeat;height: 218rpx;margin-top: 40rpx;"
			:style="type=='svip'?'background-image:url(../../static/my/svip-bg.png);':'background-image:url(../../static/my/vip-bg.png);'">
			<view class="flex flex-y-center flex-x-b"
				style="background-color: rgba(0,0,0,0);height: 80rpx;padding-left: 70rpx;padding-right: 54rpx;">
				<view @tap.stop="change_VIP('vip')" class="flex flex-x-y">
					<image src="../../static/my/vip-icon.png" style="width: 43rpx;height: 32rpx;"></image>
					<view class="fs-30" style="margin-left: 17rpx;color: #454C61;">发个信VIP</view>
				</view>
				<view @tap.stop="change_VIP('svip')" class="flex flex-x-y">
					<image src="../../static/my/svip-icon.png" style="width: 43rpx;height: 32rpx;"></image>
					<view class="fs-30" style="margin-left: 17rpx;color: #FFE9D0;">发个信SVIP</view>
				</view>
			</view>

			<view class="flex flex-x-b flex-y-center" style="padding: 30rpx 50rpx 0 50rpx;" v-if="type == 'vip'"
				@tap.stop="toPage('/pages/user/vip?type=vip')">
				<view>
					<view class="fs-34 bold" style="font-style: oblique;line-height: 28rpx;color: #41486A;">
						发个信VIP
					</view>
					<view class="fs-26 mt-20" style="color:#545B6E;" v-if="!user_info.hasVip">好友受限 升级VIP</view>
					<view class="fs-26 mt-20" style="color:#818899;" v-else>有效期至:{{user_info.hasVipTime}}</view>
				</view>
				<view>
					<view class="buy-btn-vip" v-if="!user_info.hasVip">
						去开通</view>
					<view class="fs-26" v-else style="color:#41486A;">您已是VIP会员</view>
				</view>
			</view>

			<view class="flex flex-x-b flex-y-center" style="padding: 30rpx 50rpx 0 50rpx;" v-if="type == 'svip'"
				@tap.stop="toPage('/pages/user/vip?type=svip')">
				<view>
					<view class="fs-34 bold" style="font-style: oblique;line-height: 28rpx;color: #FFE9D0;">
						发个信SVIP
					</view>
					<view class="fs-26 mt-20" v-if="!user_info.hasSvip" style="color:#C3B29E;">扩充好友人数 升级SVIP</view>
					<view class="fs-26 mt-20" v-else style="color:#C3B29E;">有效期至:{{user_info.hasSvipTime}}</view>
				</view>
				<view>
					<view class="buy-btn-svip" v-if="!user_info.hasSvip">去开通</view>
					<view class="fs-26" v-else style="color:#FCE6CE;">您已是SVIP会员</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "vip-box",
		data() {
			return {
				type: 'vip',
			};
		},
		methods: {
			change_VIP(type) {
				this.type = type;
			}
		}
	}
</script>

<style lang="scss">
	.buy-btn-vip {
		width: 146rpx;
		height: 54rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #FFE9D0;
		background-color: #3E4463;
	}

	.buy-btn-svip {
		width: 146rpx;
		height: 54rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #414662;
		background-color: #FBDCB9;
	}
</style>